$(function () {
    var queryObj = {
        proName: $.getQueryString("proName"),
        brandId: "",
        price:"",
        num: "",
        page: 1,
        pageSize: 4
    };

    // 总页数 初始化值
    var totalPage = 1;

    init();
    function init() {

        mui.init({
            pullRefresh: {
                container: ".lt_view",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    auto: true,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {
                        // 重置标签 重置页码
                        $(".goods_list ul").html("");
                        queryObj.page = 1;
                        // 发送请求
                        getQueryProduct(function () {
                            // 结束下拉刷新
                            mui('.lt_view').pullRefresh().endPulldownToRefresh();
                            // 重置上拉组件
                            mui('.lt_view').pullRefresh().refresh(true);
                        })
                    }
                },
                // 上拉
                up: {
                    // 显示上拉组件的时候会被调用
                    callback: function () {
                        if (queryObj.page >= totalPage) {
                            // 结束上拉 并且给出用户提示
                            mui('.lt_view').pullRefresh().endPullupToRefresh(true);
                        }else {
                            // 正常加载下一页
                            queryObj.page++;
                            getQueryProduct(function () {
                                // 结束上拉组件
                                mui('.lt_view').pullRefresh().endPullupToRefresh(false);
                            });
                        }
                    }
                }  
            }
        });

        // getQueryProduct();
        eventList();
    }

    // 绑定一坨事件
    function eventList() {
        // 点击 排序
        $(".sort_bar").on("tap","a",function(){
            /*
                1.只对价格和数量做处理 其他不管
                2.改变被点击的样式
                3.点击价格或者销量 根据被点击值 去改变参数
            */
           var sortkey = $(this).data("sortkey");
           if(!sortkey) {
               return;
           }
           // 2 改变span标签的样式
           // toggleClass 有就隐藏 没有就显示
            $(this).find(".fa").toggleClass("fa-angle-down fa-angle-up");
            // 3 获取升序还是降序
            // 判断a标签里面的span如果up类 升序1 否则 降序2
            queryObj.num = "";
            queryObj.price = "";
            if ($(this).find(".fa").hasClass("fa-angle-up")){
                queryObj[sortkey] = 1;
            }else {
                queryObj[sortkey] = 2;
            }
            // 重置标签 重置页码
            $(".goods_list ul").html("");
            queryObj.page = 1;
            // 以前是 $().html() 后面改成append需要先清空
            getQueryProduct();
        })
    }
    // 发送请求
    function getQueryProduct(callback) {
        $.get(location.origin + "/product/queryProduct",queryObj,function (ret) {
            // 计算总页数
            totalPage = Math.ceil(ret.count / queryObj.pageSize);
            var html = template("mainTpl",{arr:ret.data});
            $(".goods_list ul").append(html);
            callback && callback();
        })
    }
})